<script setup lang="ts">
import {ref} from 'vue';
import {useTurnStore} from "@/stores/turn.ts";

const store = useTurnStore();

const lawCase = ref(
[
      {
        name: '第一审',
        content: '第一审法院认为被告人张三犯有故意杀人罪，判处其死刑，剥夺政治权利终身。'
      },
      {
        name: '第二审',
        content: '第二审法院认为被告人张三犯有故意杀人罪，判处其无期徒刑，剥夺政治权利一年。'
      },
      {
        name: '第三审',
        content: '第三审法院认为被告人张三犯有故意杀人罪，判处其有期徒刑十年，剥夺政治权利五年。'
      },
      {
        name: '第四审',
        content: '第四审法院认为被告人张三犯有故意杀人罪，判处其有期徒刑五十年，剥夺政治权利三年。'
      },
      {
        name: '第五审',
        content: '第五审法院认为被告人张三犯有故意杀人罪，判处其有期徒刑一百年，剥夺政治权利一年。'
      }
    ]
)
</script>

<template>
  <div class="lineChart">
    <h2 v-if="store.provinceEvent.province == ''"> 请点击图表查看案件详情 </h2>
    <h2 v-else>  {{ store.provinceEvent.province }} : {{ store.provinceEvent.event }}  </h2>
    <div v-for="(item, index) in lawCase" :key="index">
      <p class="description">{{ item.name }}: {{ item.content }}</p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.lineChart{
  width: 100%;
  height: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid #ccc;
  border-radius: 10px;
  overflow-y: scroll;
  .lineChart::-webkit-scrollbar {
      width: 0;
  }
  .description{
    width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

  }
}
</style>
